<template>
  <div class="bookList"> 
    <van-card
      v-for="(item,index) in booklist"
      :key="index"
      :price="parseFloat(item.price).toFixed(2)"
      :desc="item.author"
      :title="item.name"
      :thumb="'http://localhost:8080/'+item.img"
      @click="goDetail(item.id)"
    >
        <template #tags>
          <van-tag  type="danger">{{item.category}}</van-tag>
        </template>
    </van-card>
  </div>
</template>

<script>
import axios from "axios"

export default {
  created: function () {
    let _this = this;

    axios.get("/json/category/0.json").then(function (resp) {
      _this.booklist = resp.data;
    });
  },
  data() {
    return {
      booklist: [],
    };
  },
  methods: {
    goDetail: function(toId) {
      let _this = this;

      this.$router.push({name:'/details',params:{
        id: toId,
      }})
    }
  },
};
</script>

<style scoped>
.bookList{
    text-align:left;
}
</style>>